<template>
	<Form ref="model" :model="model" :rules="ruleValidate" :label-width="80">
		<div v-for="(t,i) in forms" :key="i">
			<FormItem :label="t.label" :prop="t.model">
				<div v-if="t.type=='input'">
					<Input v-if="t.inputType=='text'" type="text" v-model="model[t.model]" :placeholder="t.placeholder"></Input>
					<Input v-if="t.inputType=='password'" type="password" v-model="model[t.model]" :placeholder="t.placeholder"></Input>
					<Input v-if="t.inputType=='email'" v-model="model[t.model]" :placeholder="t.placeholder"></Input>
				 <Input  v-if="t.inputType=='textarea'" v-model="model[t.model]" type="textarea" :autosize="{minRows: 2,maxRows: 5}" :placeholder="t.placeholder"></Input>
				
				</div>
				<div v-if="t.type=='select'">
					 <Select v-model="model[t.model]">
		                <Option v-for="(tt,ii) in t.values" :value="tt.value" :key="ii">{{tt.name}}</Option>
           			 </Select>
				</div>
				<div v-if="t.type=='datepicker'">
					<DatePicker type="date" :placeholder="t.placeholder" v-model="model[t.model]"></DatePicker>
				</div>
				<div v-if="t.type=='timepicker'">
					<DatePicker type="time" :placeholder="t.placeholder" v-model='model[t.model]'></DatePicker>
				</div>
				<div v-if="t.type=='radio'">
				<RadioGroup v-model="model[t.model]">
                <Radio  v-for="(tt,ii) in t.values" :label="tt.value" :key="ii">{{tt.name}}}</Radio>
                 </RadioGroup>
				</div>
				<div v-if="t.type=='check'">
					<CheckboxGroup v-model="model[t.model]">
             		<Checkbox  v-for="(tt,ii) in t.values" :label="tt.value" :key="ii">{{tt.name}}}</Checkbox>
            		</CheckboxGroup>
				</div>
				<div v-if="t.type=='switch'">
						<i-switch  v-model="model[t.model]" :size="t.size||'large'">
							<span slot="开启">开启</span>
							<span slot="关闭">关闭</span>
						</i-switch>
				</div>
				<div v-if="t.type=='slider'">
					<Slider v-model="model[t.model]" range></Slider>
				</div>
			</FormItem>
		</div>
         <slot>
          临时插槽
        </slot>
		<FormItem>
            <Button type="primary" @click="handleSubmit('model')">Submit</Button>
          -<Button type="ghost" @click="handleReset('model')" style="margin-left: 8px">Reset</Button>
        </FormItem>
	</Form>
</template>
<script>
export default {
  props: ["model", "schema",'sub'],
  computed: {
    forms() {
      return this.schema.fields.map(t => {
        return {
          ...t,
          value: this.model[t.model]
        };
      });
    },
    ruleValidate() {
      let obj = {};
      this.schema.fields.forEach(t => {
        obj[t.model] = t.rules;
      });
      return obj;
    }
  },
  data() {
    return {
      formItem: {}
    };
  },
  methods: {
    handleSubmit(name) {
      console.log(this.$refs, name);
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
          if(this.sub){
          	this.sub()
          }
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>

</style>